<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <BreadView>
      <BreadItem :to="'/'">首页</BreadItem>
      <transition name="bounce">
        <BreadItem :key="subcate&&subcate.id">{{subcate&&subcate.name}}</BreadItem>
      </transition>
    </BreadView>
    <!-- 轮播图 -->
    <LunBoTu />
    <!-- 全部分类 -->
    <div class="sub-list">
      <h3>全部分类</h3>
      <ul v-if="subcate">
        <li v-for="item in subcate.children" :key="item.id">
          <a href="javascript:;">
            <img src="" v-lazy="item.picture">
            <p>{{item.name}}</p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 子分类推荐数据 -->
    <CateTop :nowid="nowid" />
    <!-- {{subcate}} -->
  </div>
</template>

<script>
import BreadItem from '@/components/utils/Bread/BreadItem.vue'
import BreadView from '@/components/utils/Bread/BreadView.vue'
import LunBoTu from '@/components/utils/LunboTu.vue'
import CateTop from '@/components/categroy/CateTop.vue'
export default {
  components: { BreadView, BreadItem, LunBoTu, CateTop },
  data() {
    return {
      nowid: null,
    }
  },
  methods: {

  },
  mounted() {
    this.nowid = this.$route.query.id
    // console.log(this.nowid);
  },
  computed: {
    subcate() {
      let nowobj = this.$store.state.category.cate.find(item => {
        return item.id == this.nowid
      })
      return nowobj && nowobj
    }
  },
  watch: {
    '$route'(val) {
      // console.log(val);
      this.nowid = val.query.id
      // this.id=this.nowid
    },
    nowid: {
      handler(val) {
        // console.log(val);
        this.id = val
      },
      deep: true,
      // immediate:true
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
h3 {
  font-size: 28px;
  color: #666;
  font-weight: normal;
  text-align: center;
  line-height: 100px;
}
.sub-list {
  margin-top: 20px;
  background-color: #fff;
  ul {
    display: flex;
    padding: 0 32px;
    flex-wrap: wrap;
    li {
      width: 168px;
      height: 160px;
      a {
        text-align: center;
        display: block;
        font-size: 16px;
        img {
          width: 100px;
          height: 100px;
        }
        p {
          line-height: 40px;
        }
        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
// .bounce-leave-active {
//   animation: bounce-in 0.5s reverse;
// }
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>